<template>
  <main
    class="w-full min-h-screen bg-gradient-to-br from-indigo-500 via-blue-400 to-purple-200 overflow-x-hidden relative content-center">

    <div class="box1 purple fadeSlideTo">to</div>
    <div class="box1 green fadeSlideFrom">from</div>
    <div class="box1 blue fadeSlideFromTo">fromTo</div>
    <div style="height: 20px;width: 100%;"></div>

    <div class="flair flair--25"></div>
    <div class="nav light">
      <button id="play" @click="play">play()</button>
      <button id="pause" @click="pause">pause()</button>
      <button id="resume" @click="resume">resume()</button>
      <button id="reverse" @click="reverse">reverse()</button>
      <button id="restart" @click="restart">restart()</button>
    </div>


  </main>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const { $gsap } = useNuxtApp()

const tween = ref<any>(null)

onMounted(() => {
  let nav = document.querySelector('.nav') as HTMLElement;

  tween.value = $gsap.to(".flair", {
    duration: 2,
    x: () => nav?.offsetWidth, // animate by the px width of the nav
    xPercent: -100, // offset by the width of the box
    rotation: 360,
    ease: "none",
    paused: true
  });

  init()
});

const play = () => tween.value?.play();
const pause = () => tween.value?.pause();
const resume = () => tween.value?.resume();
const reverse = () => tween.value?.reverse();
const restart = () => tween.value?.restart();

const init = () => {

  const gsapEffects = [
    {
      id: "fadeSlideTo",
      props: { opacity: 0.5, x: 300, yoyo: true, repeat: -1 }
    },
    {
      id: "fadeSlideFrom",
      animate: 'from',
      props: { opacity: 0.25, x: 300, yoyo: true, repeat: -1 }
    },
    {
      id: "fadeSlideFromTo",
      animate: 'fromTo',
      props: { opacity: 0.1, x: 300 },
      props2: { opacity: 1, x: 600, yoyo: true, repeat: -1 }
    }
  ];

  gsapEffects.forEach(effect => {
    $gsap.registerEffect({
      name: effect.id,
      defaults: { duration: 1 },
      extendTimeline: true,
      effect(targets: any, config: any) {
        if (effect.animate === 'from') {
          return $gsap.from(targets, { ...effect.props, ...config })
        }
        else if (effect.animate === 'fromTo') {
          return $gsap.fromTo(targets,
            { ...effect.props, ...config },
            { ...effect.props2 }
          )
        }
        else {
          return $gsap.to(targets, { ...effect.props, ...config })
        }
      }
    });
  });

  // 创建时间线并应用效果
  const tl = $gsap.timeline();
  tl.fadeSlideTo(".fadeSlideTo")
    .fadeSlideFrom(".fadeSlideFrom", { delay: 0 })
    .fadeSlideFromTo(".fadeSlideFromTo", { delay: 0 })

}

</script>

<style lang="scss" scoped>
.content-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
}

button {
  text-transform: none;
  margin: 0.25rem;
}

.nav.light {
  padding-top: 2rem;
  background-color: transparent;
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.flair {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  // position: absolute;
  // left: 0;
  // top: 50%;
  // transform: translateY(-50%);
}

.box1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
}



.purple {
  background-color: #9c27b0;
}

.green {
  background-color: #4caf50;
}

.blue {
  background-color: #2196f3;
}

.red {
  background-color: #f44336;
}

.yellow {
  background-color: #ffc107;
}

.orange {
  background-color: #ff9800;
}
</style>